<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - 页面迷失在太空中</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: #000;
            color: #fff;
            min-height: 100vh;
            overflow: hidden;
            position: relative;
        }
        
        .space-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
            z-index: -2;
        }
        
        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        
        .star {
            position: absolute;
            background-color: #fff;
            border-radius: 50%;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            z-index: 1;
        }
        
        .astronaut {
            width: 250px;
            height: 250px;
            position: relative;
            margin-bottom: 40px;
            animation: float 6s ease-in-out infinite;
        }
        
        .astronaut img {
            width: 100%;
            height: auto;
            filter: drop-shadow(0 0 20px rgba(100, 200, 255, 0.7));
        }
        
        .error-code {
            font-size: 12rem;
            font-weight: 900;
            color: transparent;
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            -webkit-background-clip: text;
            background-clip: text;
            text-shadow: 0 0 20px rgba(79, 172, 254, 0.5);
            line-height: 1;
            margin-bottom: 20px;
        }
        
        .error-title {
            font-size: 3rem;
            margin-bottom: 20px;
            color: #4facfe;
            text-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
        }
        
        .error-message {
            font-size: 1.5rem;
            max-width: 700px;
            margin-bottom: 40px;
            line-height: 1.6;
            color: #b8e1ff;
        }
        
        .actions {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 60px;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            padding: 15px 35px;
            background: rgba(79, 172, 254, 0.2);
            color: #fff;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            border: 2px solid #4facfe;
            backdrop-filter: blur(5px);
            box-shadow: 0 0 15px rgba(79, 172, 254, 0.4);
            cursor: pointer;
        }
        
        .btn:hover {
            background: rgba(79, 172, 254, 0.4);
            transform: translateY(-5px);
            box-shadow: 0 5px 25px rgba(79, 172, 254, 0.8);
        }
        
        .btn i {
            margin-right: 10px;
        }
        
        .btn-home {
            background: rgba(0, 242, 254, 0.2);
            border-color: #00f2fe;
            box-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
        }
        
        .btn-home:hover {
            background: rgba(0, 242, 254, 0.4);
            box-shadow: 0 5px 25px rgba(0, 242, 254, 0.8);
        }
        
        .search-box {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            width: 100%;
            max-width: 500px;
            margin: 0 auto 40px;
            border: 2px solid #4facfe;
        }
        
        .search-box input {
            background: transparent;
            border: none;
            color: #fff;
            font-size: 1.2rem;
            padding: 10px;
            width: 100%;
            outline: none;
        }
        
        .search-box button {
            background: transparent;
            border: none;
            color: #4facfe;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 5px 10px;
            transition: all 0.3s ease;
        }
        
        .search-box button:hover {
            transform: scale(1.2);
        }
        
        .planet {
            position: absolute;
            border-radius: 50%;
            z-index: -1;
            filter: drop-shadow(0 0 20px rgba(100, 200, 255, 0.5));
        }
        
        .planet-1 {
            width: 400px;
            height: 400px;
            background: radial-gradient(circle at 30% 30%, #6a11cb, #2575fc);
            top: -200px;
            right: -200px;
            opacity: 0.3;
        }
        
        .planet-2 {
            width: 300px;
            height: 300px;
            background: radial-gradient(circle at 30% 30%, #ff9a9e, #fad0c4);
            bottom: -150px;
            left: -150px;
            opacity: 0.2;
        }
        
        .comet {
            position: absolute;
            width: 100px;
            height: 5px;
            background: linear-gradient(to right, transparent, #fff, transparent);
            filter: blur(1px);
            transform-origin: left;
            animation: comet 15s linear infinite;
            z-index: -1;
        }
        
        .satellite {
            position: absolute;
            font-size: 2rem;
            animation: orbit 20s linear infinite;
            z-index: 0;
        }
        
        .footer {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            text-align: center;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-20px) rotate(5deg); }
            50% { transform: translateY(0) rotate(0deg); }
            75% { transform: translateY(-15px) rotate(-5deg); }
        }
        
        @keyframes comet {
            0% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            100% { transform: translateX(100vw) translateY(50vh) rotate(45deg); opacity: 0; }
        }
        
        @keyframes orbit {
            0% { transform: rotate(0deg) translateX(250px) rotate(0deg); }
            100% { transform: rotate(360deg) translateX(250px) rotate(-360deg); }
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0.2; }
            50% { opacity: 1; }
        }
        
        @media (max-width: 768px) {
            .error-code { font-size: 8rem; }
            .error-title { font-size: 2rem; }
            .error-message { font-size: 1.2rem; padding: 0 20px; }
            .astronaut { width: 180px; height: 180px; }
            .btn { padding: 12px 25px; font-size: 1rem; }
            .planet-1 { width: 300px; height: 300px; top: -150px; right: -150px; }
            .planet-2 { width: 200px; height: 200px; bottom: -100px; left: -100px; }
        }
    </style>
</head>
<body>
    <div class="space-bg"></div>
    <div class="stars" id="stars"></div>
    
    <div class="planet planet-1"></div>
    <div class="planet planet-2"></div>
    
    <div class="container">
        <div class="astronaut">
            <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <circle cx="100" cy="80" r="30" fill="#F0F0F0" />
                <circle cx="100" cy="80" r="25" fill="#FFFFFF" />
                <circle cx="90" cy="75" r="5" fill="#333" />
                <circle cx="110" cy="75" r="5" fill="#333" />
                <ellipse cx="100" cy="90" rx="8" ry="4" fill="#FF6B6B" />
                <rect x="70" y="100" width="60" height="80" rx="15" fill="#4FACFE" />
                <rect x="65" y="110" width="20" height="60" rx="10" fill="#4FACFE" />
                <rect x="115" y="110" width="20" height="60" rx="10" fill="#4FACFE" />
                <rect x="80" y="180" width="15" height="30" rx="7" fill="#4FACFE" />
                <rect x="105" y="180" width="15" height="30" rx="7" fill="#4FACFE" />
                <circle cx="100" cy="60" r="10" fill="#FFD700" />
                <circle cx="100" cy="60" r="5" fill="#FF6B6B" />
            </svg>
        </div>
        
        <div class="error-code">404</div>
        <h1 class="error-title">页面迷失在太空中</h1>
        <p class="error-message">
            看起来你试图访问的页面已经离开了地球轨道。<br>
            别担心，我们的宇航员正在努力寻找它。同时，你可以返回主页或探索其他星系。
        </p>
        
        <div class="search-box">
            <input type="text" placeholder="在全宇宙搜索内容..." id="search-input">
            <button id="search-btn"><i class="fas fa-search"></i></button>
        </div>
        
        <div class="actions">
            <a href="#" class="btn btn-home"><i class="fas fa-home"></i> 返回地球（首页）</a>
            <a href="#" class="btn"><i class="fas fa-rocket"></i> 探索其他星系</a>
            <a href="#" class="btn"><i class="fas fa-history"></i> 返回上一空间站</a>
        </div>
        
        <div class="satellite">🛰️</div>
    </div>
    
    <div class="footer">
        <p>宇宙导航中心 © 2023 | 星际错误代码 404</p>
    </div>

    <script>
        // 创建星星背景
        function createStars() {
            const starsContainer = document.getElementById('stars');
            const starsCount = 200;
            
            for (let i = 0; i < starsCount; i++) {
                const star = document.createElement('div');
                star.classList.add('star');
                
                // 随机大小和位置
                const size = Math.random() * 3;
                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
                star.style.left = `${Math.random() * 100}%`;
                star.style.top = `${Math.random() * 100}%`;
                
                // 随机闪烁动画
                const duration = 2 + Math.random() * 3;
                const delay = Math.random() * 5;
                star.style.animation = `twinkle ${duration}s ease-in-out ${delay}s infinite`;
                
                starsContainer.appendChild(star);
            }
        }
        
        // 创建彗星效果
        function createComets() {
            setInterval(() => {
                const comet = document.createElement('div');
                comet.classList.add('comet');
                
                // 随机位置和角度
                const startX = Math.random() * 100;
                const startY = Math.random() * 100;
                comet.style.left = `${startX}%`;
                comet.style.top = `${startY}%`;
                
                // 随机旋转角度
                const rotation = Math.random() * 90 - 45;
                comet.style.transform = `rotate(${rotation}deg)`;
                
                document.body.appendChild(comet);
                
                // 动画结束后移除彗星
                setTimeout(() => {
                    comet.remove();
                }, 15000);
            }, 5000);
        }
        
        // 搜索功能
        document.getElementById('search-btn').addEventListener('click', function() {
            const searchTerm = document.getElementById('search-input').value;
            if (searchTerm.trim() !== '') {
                alert(`正在全宇宙搜索: "${searchTerm}"\n\n抱歉，在已知宇宙中未找到相关内容。`);
            } else {
                alert('请输入要搜索的内容！');
            }
        });
        
        // 页面加载时初始化
        window.addEventListener('load', function() {
            createStars();
            createComets();
            
            // 添加漂浮的宇航员动画
            document.querySelector('.astronaut').style.animation = 'float 6s ease-in-out infinite';
        });
        
        // 添加键盘事件监听
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('search-btn').click();
            }
            
            // 秘密代码：输入"debug"显示隐藏消息
            if (e.key === 'd') {
                setTimeout(() => {
                    if (document.getElementById('search-input').value.toLowerCase() === 'debug') {
                        const debugMsg = document.createElement('div');
                        debugMsg.innerHTML = '🚀 恭喜发现隐藏代码！<br>宇宙导航中心送你一个秘密坐标：42.3601° N, 71.0589° W';
                        debugMsg.style.position = 'fixed';
                        debugMsg.style.top = '50%';
                        debugMsg.style.left = '50%';
                        debugMsg.style.transform = 'translate(-50%, -50%)';
                        debugMsg.style.background = 'rgba(0,0,0,0.8)';
                        debugMsg.style.color = '#4facfe';
                        debugMsg.style.padding = '20px';
                        debugMsg.style.borderRadius = '10px';
                        debugMsg.style.zIndex = '1000';
                        debugMsg.style.textAlign = 'center';
                        debugMsg.style.fontSize = '1.5rem';
                        debugMsg.style.border = '2px solid #4facfe';
                        document.body.appendChild(debugMsg);
                        
                        setTimeout(() => {
                            debugMsg.remove();
                        }, 5000);
                    }
                }, 100);
            }
        });
    </script>
</body>
</html>